
import Taro, {Component} from '@tarojs/taro'
import {View, Text, Image, ScrollView} from '@tarojs/components'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, pageSize, getCaNumber, subtime} from '../../utils/common'

import FooterMenu from '../../components/FooterMenu'
import './index.less'

import noneOrder from "../../assets/img/none_order.png";
import nonePackge from "../../assets/img/none_packge.png";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class OrderIndex extends Component<IHomeProps> {
  constructor(props){
    super(props)
  }

  state = {
    columnData: [
      { id: 0, title: '我的订单' },
      { id: 1, title: '我的快递' }
    ],
    items: [],
    totalCount: 0,
    pageIndex: 1,
    pageSize,
    currentNavId: 0,
    formIsShowShipping: false, // 是都是查询快递
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '我的订单'})
    this.getCarTaxOrders()
  }

  getCarTaxOrders() {
    let { declareTaxStore } = this.props.stores
    let { pageIndex, pageSize, formIsShowShipping } = this.state
    declareTaxStore.getCarTaxOrders({
      pageIndex,
      pageSize,
      formIsShowShipping,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: res.totalCount, items: res.items})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  setCurrentNavId(id: number) {
    this.setState({ currentNavId: id, items: [], totalCount: 0, pageIndex: 1,
      formIsShowShipping: id !==0
    }, () => {
      this.getCarTaxOrders()
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getCarTaxOrders()
      })
    }
  }

  link(item: object): void {
    let { currentNavId,  } = this.state
    Taro.setStorageSync('orderDetail', JSON.stringify(item))
    if(currentNavId===0) {
      if(item.status===8) { // 被驳回订单修改
        getRuntime().navigateTo('/pages/order/orderEdit?id='+item.id)
        return
      }
      getRuntime().navigateTo('/pages/order/orderDetail?orderId='+item.id)
      return
    }else {
      getRuntime().navigateTo('/pages/order/packgeDetail?orderId='+item.id)
      return
    }
  }

  editOrder(item: object, e) {
    e.stopPropagation()
    console.log(item)
    // getRuntime().setStorage('orderDetail', item)
    getRuntime().navigateTo('/pages/order/orderEdit?id='+item.id)
  }


  render() {
    let { columnData, items, currentNavId } = this.state
    return (
      <View className='order-index'>
        <View className='order-top'>
          <ScrollView
            className='scroll-column' scrollX scrollWithAnimation
          >
            {
              columnData.length > 0 && columnData.map(item => {
                return (
                  <View
                    className={currentNavId === item.id ? 'scroll-column__title scroll-column__active' : 'scroll-column__title'}
                    key={item.id}
                    style={{width:'50%'}}
                    onClick={this.setCurrentNavId.bind(this, item.id)}
                  >{item.title}</View>
                )
              })
            }
          </ScrollView>
        </View>

        <View className='interval' />

        <View className='order-main'>
          {items.length<=0&&
          <View className='none'>
            {currentNavId === 0&&
            <View>
               <Image className='none-icon' src={noneOrder} />
               <View className='none-tips'>您暂时还没有订单！</View>
            </View>
            }
            {currentNavId === 1&&
            <View>
               <Image className='none-icon' src={nonePackge} />
               <View className='none-tips'>您暂时还没有快递！</View>
            </View>
            }
          </View>
          }
          {items.length > 0 &&
          <View className='list-01'>
            {
              items.map(item => {
                let subItem = item.carOrderDetails[0]
                let tpl = null
                if(currentNavId === 0){
                  // 订单
                  tpl =  <View className='list-01__item' onClick={this.link.bind(this, item)}>
                    <View className='list-01__line'>
                      <View className='list-01__title'>
                        <Text className='list-01__spec'>{subItem.carName}</Text>
                        <Text className='list-01__spec'>{subItem.carSpec}</Text>
                      </View>
                      <View className='list-01__price color-theme' style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
                        <Text className='small color-theme'> -￥</Text>
                        <Text className='price color-theme'>{subItem.price}</Text>
                        <Text className='int'>|</Text>
                        {
                          item.status != 8&&
                          <Text className='price color-theme'>{item.statusView}</Text>
                        }
                        {
                          // 被驳回订单重新修改提交
                          item.status == 8&&
                            <View>
                               <Text className='price color-error'>{item.statusView}</Text>
                               <Text className='int'>|</Text>
                               <Text className='price color-error' onClick={this.editOrder.bind(this, item)}>修改订单</Text>
                            </View>
                        }
                      </View>
                    </View>
                    <View className='list-01__line'>
                      <View className='list-01__carId color-theme'>{getCaNumber(subItem.carNumber)}</View>
                      <View className='list-01__date font-dark'>{subtime(item.creationTime)}</View>
                    </View>
                    {
                      item.status==8&&
                      <View className='list-01__line'>
                         <View className='list-01__date font-dark re'>驳回原因：{item.rejectionReason}</View>
                      </View>
                    }
                  </View>
                }else {
                  // 快递
                  tpl =  <View className='list-01__item' onClick={this.link.bind(this, item)}>
                    <View className='list-01__line'>
                      <View className='list-01__title'>
                        <Text className='list-01__spec'>车船税纸质税票</Text>
                      </View>
                      <View className='list-01__price color-theme'>
                        <Text className='price color-theme'>{item.statusView}</Text>
                      </View>
                    </View>
                    <View className='list-01__line'>
                      <View className='list-01__carId color-theme'>{subItem.carName}{getCaNumber(subItem.carNumber)}</View>
                      <View className='list-01__date font-dark'>{subtime(item.creationTime)}</View>
                    </View>
                  </View>
                }
                return tpl
              })
            }
          </View>
          }
        </View>


        <View className='footer-block'  />

        <FooterMenu currentMenu='order' />

      </View>
    )
  }
}

export default OrderIndex
